<template>
    <el-button @click="test">TestValue</el-button>
    <el-table :data="orders" style="width: 100%">
        <el-table-column fixed prop="id" label="Id" width="150" />
        <el-table-column prop="buyer" label="买家" width="120" />
        <el-table-column prop="deviceName" label="设备名称" width="120" />
        <el-table-column prop="count" label="购买数量" width="120" />
        <el-table-column prop="totalPrice" label="订单总价" width="600" />
        <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="{ row }">
                <el-button link type="primary" size="small" @click="handleClick(row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="modify(row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog
        v-model="dialogVisible"
        title="设备详情"
        width="500"
        :before-close="handleClose"
    >
        <el-radio-group v-model="labelPosition" aria-label="label position">
            <el-radio-button value="left">Left</el-radio-button>
            <el-radio-button value="right">Right</el-radio-button>
            <el-radio-button value="top">Top</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px" />
        <el-form
            :label-position="labelPosition"
            label-width="auto"
            :model="orderForm"
            style="max-width: 600px"
        >
            <el-form-item label="买家">
                <el-input v-model="orderForm.buyer" />
            </el-form-item>
            <el-form-item label="设备名称">
                <el-input v-model="orderForm.deviceName" />
            </el-form-item>
            <el-form-item label="设备购买数量">
                <el-input v-model="orderForm.count" />
            </el-form-item>
            <el-form-item label="总金额">
                <el-input v-model="orderForm.totalPrice" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="modifyend()">
                    修改完成
                </el-button>
            </div>
        </template>
    </el-dialog>



</template>

<script lang="ts" setup>
import {defineProps, ref} from 'vue';
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import { reactive} from 'vue'
import type { FormProps } from 'element-plus'

const labelPosition = ref<FormProps['labelPosition']>('top')

interface Order {
    id: number;
    buyer: string;
    deviceName: string;
    count: number;
    totalPrice: string;
}

const orderForm = reactive({
    id: 0,
    buyer: '',
    deviceName: '',
    count:0,
    totalPrice:""

})


const props = defineProps<{
    orders: Order[];
}>();

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const params={
    id:0,
}
const test = () => {
    console.log(1)
    console.log(props.orders);
};

const handleClick = (id:number) => {
    console.log(id)
    ElMessage({
        message: '删除成功',
        type: 'success',
        plain: true,
    })
    params.id = id
    axios.get("http://localhost:9091/order/delete",{
        params:params
    }).then(res=>{
        console.log(res)
    })
};


const modify = (row)=>{

    ElMessage({
        message: '修改成功',
        type: 'success',
        plain: true,
    })
    console.log(row)
    orderForm.id = row.id
    orderForm.buyer = row.buyer
    orderForm.deviceName = row.deviceName
    orderForm.count = row.count
    orderForm.totalPrice = row.totalPrice
    dialogVisible.value = true
}

const modifyend = ()=>{
    axios.post("http://localhost:9091/order/modify",orderForm).then(res=>{
        console.log(res)
    })
    dialogVisible.value = false
}
</script>
